<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div {
	margin:10px;
	padding:5px;
}
</style>
</head>

<body>
<h2>浏览器支持</h2>
<p>所有浏览器都支持 border-style 属性。</p>
<p class="note"><span>注释：</span>任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 &quot;inherit&quot;。</p>
</div>
<div>
  <h2>可能的值</h2>
  <table>
    <tr>
      <th>值</th>
      <th>描述</th>
    </tr>
    <tr>
      <th>none</th>
      <td><p style="border:1px #666 none;">定义无边框。</p></td>
    </tr>
    <tr>
      <th>hidden</th>
      <td><p style="border:1px #666 hidden;">与 &quot;none&quot; 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。</p></td>
    </tr>
    <tr>
      <th>dotted</th>
      <td><p>定义点状边框。在大多数浏览器中呈现为实线。</p>
        <p style="border:1px dotted #666;">Demo(1px)</p>
        <p style="border:2px dotted #666;">Demo(2px)</p>
        <p style="border:3px dotted #666;">Demo(3px)</p></td>
    </tr>
    <tr>
      <th>dashed</th>
      <td><p>定义虚线。在大多数浏览器中呈现为实线。</p>
        <p style="border:1px dashed #666;">Demo(1px)</p>
        <p style="border:2px dashed #666;">Demo(2px)</p>
        <p style="border:3px dashed #666;">Demo(3px)</p></td>
    </tr>
    <tr>
      <th>solid</th>
      <td><p style="border:1px #666 solid;">定义实线。</p></td>
    </tr>
    <tr>
      <th>double</th>
      <td><p>定义双线。双线的宽度等于 border-width 的值。</p>
        <p style="border:1px double #666;">Demo(1px)</p>
        <p style="border:2px double #666;">Demo(2px)</p>
        <p style="border:3px double #666;">Demo(3px)</p>
        <p style="border:4px double #666;">Demo(4px)</p>
        <p style="border:5px double #666;">Demo(5px)</p>
        <p style="border:6px double #666;">Demo(6px)</p>
        <p style="border:7px double #666;">Demo(7px)</p>
        <p style="border:8px double #666;">Demo(8px)</p>
        <p style="border:9px double #666;">Demo(9px)</p></td>
    </tr>
    <tr>
      <th>groove</th>
      <td><p style="border:2px #666 groove;">定义 3D 凹槽边框。其效果取决于 border-color 的值。</p></td>
    </tr>
    <tr>
      <th>ridge</th>
      <td><p style="border:2px #666 ridge;">定义 3D 垄状边框。其效果取决于 border-color 的值。</p></td>
    </tr>
    <tr>
      <th>inset</th>
      <td><p style="border:2px #666 inset;">定义 3D inset 边框。其效果取决于 border-color 的值。</p></td>
    </tr>
    <tr>
      <th>outset</th>
      <td><p style="border:2px #666 outset;">定义 3D outset 边框。其效果取决于 border-color 的值。</p></td>
    </tr>
    <tr>
      <th>inherit</th>
      <td><p  style="border:1px #666 inherit;">规定应该从父元素继承边框样式。</p></td>
    </tr>
  </table>
  <h3>描述</h3>
  <p>最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。</p>
</div>
</body>
</html>
